<template>
   <div>
    <slider class="slider" interval="3000" auto-play="false">
      <div class="frame" v-for="img in imageList">
        <image class="image" resize="cover" :src="img.src"></image>
      </div>
      <indicator class="indicator"></indicator>
    </slider>
    <text class="ind">商家推荐</text>
    <text class="ind_title">{{title}}</text>
    <div class="small">
    	<text class="small_money">￥{{money}}</text>
    	<text class="small_mon">已售 {{count}}</text>
    	<text class="small_moi">库存 {{count1}}</text>
    </div>
    <text class="dis">{{discribe}}</text>
    <text class="specification" @click="open()">商品规格</text>
    <div class="footer">
    	<div class="edit">
    		<div class="edit1">
    			<image :src="src2" class="edit_img"></image>
    			<text class="text">编辑</text>
    		</div>
    		<div class="edit2">
    			<image :src="src3" class="edit2_img"></image>
    			<text class="text">删除</text>
    		</div>
    	</div>
    	<text class="onkk">下架</text>
    	<text class="oncc">上架</text>
    </div>
    <div class="zero">
    	
    </div>
    <!-- 商品规格弹窗 -->
    <div class="wrap" v-if="show"></div>
    <div class="wrapp" v-if="show">
    	<image :src="src4" class="wrap_img" resize="cover"></image>
    	<image :src="src5" class="wra_img" resize="cover" @click="close()"></image>
    	<div class="w_title">
    		<text class="w_title1">{{title}}</text>
    		<text class="w_title2">({{spa}})</text>
    	</div>
    	<text class="w_mon">￥{{money}}</text>
    	<div class="w_text">
    		<text class="w_text1">库存 {{count}}</text>
    		<text class="w_text2">已售 {{count1}}</text>
    	</div>
    	<text class="spaaa">商品规格</text>
    	<div class="vvor">
    		<text class="vv1" v-for="(index,item) in list" :key="index.item">{{index.item}}
    		</text>
    	</div>
    </div>
  </div>
</template>
<style scoped>
	.wrapp{
		width: 100%;
		height: 352px;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background-color: #fff;
		border-radius: 10px;
	}
	.zero{
		width: 100%;
		height: 80px;
	}
	.vv1{
		width: 91px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		border: solid 2px #c9c9c9;
		margin-top: 28px;
		border-radius: 5px;
	}
	.spaaa{
		width: 100%;
		height: 15px;
		line-height: 15px;
		font-size: 15px;
		color: #33c179;
		padding-left: 12px;
		margin-top: 25px;
	}
	.wra_img{
		width: 37px;
		height: 37px;
		position: absolute;
		right: 0;
		top: -24px;
	}
	.vvor{
		width: 100%;
		padding-left: 12px;
		padding-right: 12px;
		min-height: 300px;
		/*background-color: pink;*/
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.wrap_img{
		width: 109px;
		height: 121px;
		background-color: #33c179;
		position: absolute;
		top: -40px;
		left: 12px;
		box-shadow: 3px 3px 3px #eee;
	}
	.w_title{
		width: 100%;
		height: 15px;
		flex-direction: row;
		padding-left: 148px;
		margin-top: 15px;
	}
	.w_title1{
		height: 15px;
		line-height: 15px;
		color: #333;
		font-weight: bold;
		font-size: 15px;
	}
	.w_title2{
		height: 12px;
		line-height: 12px;
		font-size: 12px;
		margin-top: 2px;
		color: #666;
	}
	.w_text{
		width: 100%;
		height: 15px;
		flex-direction: row;
		margin-top: 10px;
	}
	.w_text1{
		height: 15px;
		line-height: 15px;
		font-size: 15px;
		color: #666;
		margin-left: 148px;
	}
	.w_text2{
		height: 15px;
		line-height: 15px;
		font-size: 15px;
		color: #666;
		margin-left: 15px;
	}
	.w_mon{
		height: 19px;
		line-height: 19px;
		font-size: 19px;
		color: #ea3939;
		margin-top: 13px;
		margin-left: 148px;
	}
</style>
<style scoped>
   .image {
    width: 375px;
    height: 251px;
  }
  .slider {
    width: 375px;
    height: 251px;
  }
  .wrap{
  	width: 100%;
  	height: 100%;
  	position: fixed;
  	z-index: 2;
  	background-color: #000;
  	opacity: .5;
  }
  .edit{
  	width: 167px;
  	height: 66px;
  	background-color: #fff;
  	flex-direction: row;
  	justify-content: space-around;
  }
  .specification{
  	width: 100%;
  	padding-left: 12px;
  	height: 15px;
  	line-height: 15px;
  	color: #33c179;
  	margin-top: 35px;
  }
  .edit1{
  	width: 24px;
  	height: 66px;
  	/*flex-direction: column;*/
  }
  .text{
  	/*width: 24px;*/
  	height: 13px;
  	line-height: 13px;
  	font-size: 13px;
  	text-align: center;
  	/*flex-direction: row;*/
  	width: 28px;
  	margin-top: 7px;
  }
  .edit2{
  	width: 24px;
  	height: 66px;
  	/*flex-direction: column;*/
  }
  .edit_img{
  	width: 24px;
  	height: 24px;
  	margin-top: 15px;
  }
  .edit2_img{
  	width: 24px;
  	height: 24px;
  	margin-top: 15px;
  }
  .onkk{
  	width: 113px;
  	height: 66px;
  	text-align: center;
  	line-height: 66px;
  	background-color: #7ed8aa;
  	font-size: 25px;
  	border: 0;
  	color: #fff;
  }
  .oncc{
  	width: 117px;
  	height: 66px;
  	background-color: #33c179;
  	line-height: 66px;
  	text-align: center;
  	font-size: 25px;
  	border: 0;
  	color: #fff;
  }
  .frame {
    width: 375px;
    height: 251px;
    position: relative;
  }
  .indicator{
  	width: 100%;
  	position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .ind{
  	width: 100%;
  	padding-left: 12px;
  	height: 13px;
  	line-height: 13px;
  	font-size: 13px;
  	color: #ea3939;
  	margin-top: 15px;
  }
  .ind_title{
  	width: 100%;
  	height: 16px;
  	line-height: 16px;
  	font-size: 16px;
  	padding-left: 12px;
  	color: #333;
  	margin-top: 20px;
  }
  .small{
  	width: 100%;
  	height: 19px;
  	flex-direction: row;
  	padding-left: 12px;
  	box-sizing: border-box;
  	margin-top: 20px;
  }
  .small_money{
  	height: 19px;
  	line-height: 19px;
  	font-size: 19px;
  	color: #ea3939;
  }
  .small_mon{
  	height: 13px;
  	line-height: 13px;
  	font-size: 13px;
  	color: #999;
  	margin-left: 135px;
  	margin-top: 4px;
  }
  .small_moi{
  	height: 13px;
  	line-height: 13px;
  	font-size: 13px;
  	color: #999;
  	margin-left: 33px;
  	margin-top: 4px;
  }
  .dis{
  	width: 100%;
  	padding-left: 12px;
  	padding-right: 12px;
  	margin-top: 35px;
  	font-size: 14px;
  	color: #666;
  	overflow: scroll;
  }
  .footer{
  	width: 100%;
  	height: 66px;
  	flex-direction: row;
  	position: fixed;
  	bottom: 0;
  }
</style>
<script>
export default {
    data () {
        return {
           imageList: [
	          { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
	          { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
	          { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
	        ],
	        title: '先定一个小目标-挣一个亿',
	        money: '52.1',
	        count: '999',
	        count1: '100',
	        discribe: '爱过以后只留下一道伤口 你曾经对我说的天长地久 随着你转身远走都化作乌有 该不该就这样放手 什么原因让你一去不回头 缠绵的伤口不停地颤抖 为什么不能挽留 从前的温柔 有情的一切换无情的所有 ',
	        src2: 'http://192.168.2.123:8080/img/home_editor.png',
	        src3: 'http://192.168.2.123:8080/img/shop_delete.png',
	        show: false, //商品规格的弹窗
	        src4: '',
	        src5: 'http://192.168.2.123:8080/img/index_close.png',
	        spa: '10L 蓝色',
	        list: [
	        	{
	        		item: '10L 黄色'
	        	},
	        	{
	        		item: '10L 黄色'
	        	},
	        	{
	        		item: '10L 黄色'
	        	},
	        	{
	        		item: '10L 黄色'
	        	},
	        	{
	        		item: '10L 黄色'
	        	},
	        	{
	        		item: '10L 黄色'
	        	},
	        	{
	        		item: '10L 黄色'
	        	},
	        	{
	        		item: '10L 黄色'
	        	},
	        	{
	        		item: '10L 黄色'
	        	},
	        ]
        }
    },
    methods: {
       // 点击关闭
       close(){
       		this.show = false;
       },
       // 点击商品规格
       open(){
       		this.show = true;
       		// alert('111');
       }
    }
}
</script>
